/**
 * @description: 账户密码登录
 * @author: YoungYa
 * @date 2024/11/24
 */
import { ProFormText } from '@ant-design/pro-components';
import { Icon, useIntl } from '@umijs/max';
import { useRequest } from 'ahooks';
import {Button, Col, Form, Input, Row, Spin} from 'antd';
import { get } from 'lodash-es';
import type { FC } from 'react';
// eslint-disable-next-line no-duplicate-imports
import React from 'react';

import { getCaptcha } from '@/services/logic/login'; // 获取图形验证码
import { formatPerfix } from '@/utils';
import { INTERNATION, ROUTES } from '@/utils/enums';

const Account: FC = ({toRegister}) => {
  const { formatMessage } = useIntl();
  // 获取图形验证码
  const {
    loading,
    run: getVerifyCode,
    data: verifyCode,
  } = useRequest(async () => get(await getCaptcha(), 'data'));
  return (
    <>
      {/* 用户名*/}
      <ProFormText
        name="user_name"
        fieldProps={{
          size: 'large',
          prefix: <Icon icon="ri:user-line" className={'prefixIcon'} />,
        }}
        placeholder={formatMessage({
          id: formatPerfix(ROUTES.LOGIN, 'type.account.user_name.placeholder'),
        })}
        rules={[
          {
            required: true,
            message: formatMessage({
              id: formatPerfix(ROUTES.LOGIN, 'type.account.user_name.required'),
            }),
          },
        ]}
      />
      {/* 密码*/}
      <ProFormText.Password
        name="password"
        fieldProps={{
          size: 'large',
          prefix: <Icon icon="ri:lock-line" className={'prefixIcon'} />,
          visibilityToggle: false,
        }}
        placeholder={formatMessage({
          id: formatPerfix(ROUTES.LOGIN, 'type.account.password.placeholder'),
        })}
        rules={[
          {
            required: true,
            message: formatMessage({
              id: formatPerfix(ROUTES.LOGIN, 'type.account.password.required'),
            }),
          },
        ]}
      />
      {/* 验证码*/}
      <Form.Item>
        <Row gutter={8}>
          <Col span={14}>
            <Form.Item
              name="verifyCode"
              noStyle
              rules={[
                {
                  required: true,
                  message:
                    formatMessage({ id: INTERNATION.PLACEHOLDER }) +
                    formatMessage({ id: formatPerfix(ROUTES.LOGIN, 'type.mobile.captcha') }),
                },
              ]}
            >
              <Input
                size="large"
                placeholder={
                  formatMessage({ id: INTERNATION.PLACEHOLDER }) +
                  formatMessage({ id: formatPerfix(ROUTES.LOGIN, 'type.mobile.captcha') })
                }
              />
            </Form.Item>
          </Col>
          <Col span={10}>
            <Spin spinning={loading}>
              <div
                dangerouslySetInnerHTML={{ __html: verifyCode || '' }}
                style={{ width: '100%', cursor: 'pointer' }}
                onClick={() => getVerifyCode()}
              />
            </Spin>
          </Col>
        </Row>
      </Form.Item>
      <Row gutter={8} style={{ marginTop: -24 }}>
      <Button type={'link'} onClick={toRegister}>{formatMessage({ id: formatPerfix(ROUTES.REGISTER) })}</Button>
    </Row>
    </>
  );
};
export default Account;
